import { defineView } from "@/routers/tools.mjs";

const uibDropdownView = defineView({
  template: /* HTML */ html`
    <div ng-controller="DropdownCtrl as $dropdownCtrl">
      <!-- Simple dropdown -->
      <span uib-dropdown on-toggle="$dropdownCtrl.toggled(open)">
        <a href="javascript:;" id="simple-dropdown" uib-dropdown-toggle>
          Click me for a dropdown, yo!
        </a>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          aria-labelledby="simple-dropdown"
        >
          <li ng-repeat="choice in $dropdownCtrl.items track by $index">
            <a href="">{{ choice }}</a>
          </li>
        </ul>
      </span>

      <!-- Single button -->
      <div class="btn-group" uib-dropdown is-open="$dropdownCtrl.status.isOpen">
        <button
          id="single-button"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
          ng-disabled="$dropdownCtrl.disabled"
        >
          Button dropdown <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="single-button"
        >
          <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Another action</a>
          </li>
          <li role="menuitem">
            <a href="javascript:void(0)">Something else here</a>
          </li>
          <li class="divider"></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Separated link</a>
          </li>
        </ul>
      </div>

      <!-- Split button -->
      <div class="btn-group" uib-dropdown>
        <button id="split-button" type="button" class="btn btn-danger">
          Action
        </button>
        <button type="button" class="btn btn-danger" uib-dropdown-toggle>
          <span class="caret"></span>
          <span class="sr-only">Split button!</span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="split-button"
        >
          <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Another action</a>
          </li>
          <li role="menuitem">
            <a href="javascript:void(0)">Something else here</a>
          </li>
          <li class="divider"></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Separated link</a>
          </li>
        </ul>
      </div>

      <!-- Single button using append-to-body -->
      <div class="btn-group" uib-dropdown dropdown-append-to-body>
        <button
          id="btn-append-to-body"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
        >
          Dropdown on Body <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="btn-append-to-body"
        >
          <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Another action</a>
          </li>
          <li role="menuitem">
            <a href="javascript:void(0)">Something else here</a>
          </li>
          <li class="divider"></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Separated link</a>
          </li>
        </ul>
      </div>

      <!-- CASE: use directive -->
      <div class="btn-group" uib-dropdown>
        <button
          id="button-template-url"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
          ng-disabled="$dropdownCtrl.disabled"
        >
          Dropdown using template <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          aria-labelledby="button-template"
          dropdown-menu-fill
        ></ul>
      </div>

      <!-- CASE: solve template-url -->
      <div class="btn-group" uib-dropdown>
        <button
          id="button-template-url"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
          ng-disabled="$dropdownCtrl.disabled"
        >
          Dropdown using template <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          template-url="dropdown.html"
          aria-labelledby="button-template-url"
        ></ul>
        <script type="text/ng-template" id="dropdown.html">
          <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
            <li role="menuitem"><a href="javascript:void(0)">Action in Template</a></li>
            <li role="menuitem"><a href="javascript:void(0)">Another action in Template</a></li>
            <li role="menuitem"><a href="javascript:void(0)">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="javascript:void(0)">Separated link in Template</a></li>
          </ul>
        </script>
      </div>

      <hr />
      <p>
        <button
          type="button"
          class="btn btn-default btn-sm"
          ng-click="$dropdownCtrl.toggleDropdown($event)"
        >
          Toggle button dropdown
        </button>
        <button
          type="button"
          class="btn btn-warning btn-sm"
          ng-click="$dropdownCtrl.disabled = !$dropdownCtrl.disabled"
        >
          Enable/Disable
        </button>
      </p>

      <hr />
      <!-- Single button with keyboard nav -->
      <div class="btn-group" uib-dropdown keyboard-nav>
        <button
          id="simple-btn-keyboard-nav"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
        >
          Dropdown with keyboard navigation <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="simple-btn-keyboard-nav"
        >
          <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Another action</a>
          </li>
          <li role="menuitem">
            <a href="javascript:void(0)">Something else here</a>
          </li>
          <li class="divider"></li>
          <li role="menuitem">
            <a href="javascript:void(0)">Separated link</a>
          </li>
        </ul>
      </div>

      <hr />
      <!-- AppendTo use case -->
      <h4>append-to vs. append-to-body vs. inline example</h4>
      <div id="dropdown-scrollable-container" class="h-[15em] overflow-auto">
        <div id="dropdown-long-content">
          <div id="dropdown-hidden-container">
            <div
              class="btn-group"
              uib-dropdown
              keyboard-nav
              dropdown-append-to="$dropdownCtrl.appendToEl"
            >
              <button
                id="btn-append-to"
                type="button"
                class="btn btn-primary"
                uib-dropdown-toggle
              >
                Dropdown in Container <span class="caret"></span>
              </button>
              <ul
                class="dropdown-menu"
                uib-dropdown-menu
                role="menu"
                aria-labelledby="btn-append-to"
              >
                <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Another action</a>
                </li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Something else here</a>
                </li>
                <li class="divider"></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Separated link</a>
                </li>
              </ul>
            </div>

            <!-- body (append) -->
            <div class="btn-group" uib-dropdown dropdown-append-to-body>
              <button
                id="btn-append-to-to-body"
                type="button"
                class="btn btn-primary"
                uib-dropdown-toggle
              >
                Dropdown on Body <span class="caret"></span>
              </button>
              <ul
                class="dropdown-menu"
                uib-dropdown-menu
                role="menu"
                aria-labelledby="btn-append-to-to-body"
              >
                <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Another action</a>
                </li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Something else here</a>
                </li>
                <li class="divider"></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Separated link</a>
                </li>
              </ul>
            </div>

            <!-- inline -->
            <div class="btn-group" uib-dropdown>
              <button
                id="btn-append-to-single-button"
                type="button"
                class="btn btn-primary"
                uib-dropdown-toggle
              >
                Inline Dropdown <span class="caret"></span>
              </button>
              <ul
                class="dropdown-menu"
                uib-dropdown-menu
                role="menu"
                aria-labelledby="btn-append-to-single-button"
              >
                <li role="menuitem"><a href="javascript:void(0)">Action</a></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Another action</a>
                </li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Something else here</a>
                </li>
                <li class="divider"></li>
                <li role="menuitem">
                  <a href="javascript:void(0)">Separated link</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
});

export default uibDropdownView;
